var htmlwebpackplugin = require('html-webpack-plugin');
const { loader } = require('mini-css-extract-plugin');

var minicssextractplugin = require('mini-css-extract-plugin');

//导入optimize-css-assets-webpack-plugin压缩css
var optimizecssassetswebpackplugin = require('optimize-css-assets-webpack-plugin');


module.exports = {
    mode: 'production',

    //配置loader
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    {
                        loader: minicssextractplugin.loader
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'less-loader'
                    }
                ]
            },

            {
                test: /\.(jpg|png|gif|bmp|jpeg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        //不要输出对象，直接输出一个字符串（base64或者图片路径）
                        esModule: false,

                        //限制base64大小，如果图片大小大于limit ==> 图片路径，如果图片大小小于等于limit ==>base64
                        limit: 1024 * 10
                    }
                }],

                //模块类型，webpack5可以正常输出css背景图
                type: 'javascript/auto'
            },

            {
                test: /\.html$/,
                use: [{
                    loader: 'html-withimg-loader'
                }]
            }
        ],

    },


    //插件
    plugins: [
        new htmlwebpackplugin({
            template: './src/index.html',
            inject: 'body',
            minify: {
                removeComments: true,
                removeAttributeQuotes: true,
                collapseWhitespace: true
            },
            //使用本地服务器时，html文件输出的文件名必须为index.html
            filename: 'index.html'
        }),

        new minicssextractplugin({
            filename: 'index.css'
        }),

        //压缩css
        new optimizecssassetswebpackplugin()
    ],

    //配置本地服务器
    devServer: {
        //服务器地址, 0.0.0.0 可以使用127.0.0.1访问，也可以使用内网ip访问，内网ip具体需要看自己的电脑
        host: '127.0.0.1',

        //端口
        port: 5000,

        //监听src文件夹所有文件变化
        watchFiles: ['./src/**/*'],

        //自动打开浏览器
        open: true,

        //本地服务器接口，打包后无效的
        onBeforeSetupMiddleware: function (server) {
            //server: 服务器实例
            //server.app: 路由实例

            //定义 /home 接口,匹配get请求
            server.app.get('/home', function (req, res) {
                //第一个参数req：请求对象（请求地址，请求数据...）
                //第二个参数res：响应对象（后台将数据返回给前端）

                //返回数据给前端
                res.send('webpack本地服务器返回数据');
            });

            server.app.get('/product', function(req, res) {
                //获取前端发送的参数
                console.log('req.query ==>', req.query);

                res.send({
                    msg: '请求成功'
                });
            });

            server.app.post('/login', function(req, res) {
                res.send({
                    msg: '登录成功'
                });
            });
        },

        //配置代理
        proxy: {
            //以上onBeforeSetupMiddleware没有匹配的路径会在proxy匹配
            //将http://127.0.0.1:5001/mypro 重写成 http://127.0.0.1:5001/pro
            //最终向 http://127.0.0.1:5001/pro 拿数据

            '/mypro': {
                //目标服务器地址
                target: 'http://127.0.0.1:5001',

                //重写请求路径
                pathRewrite: {
                    '^/mypro': '/pro',
                }
            }
        }
    }
}